<template>
    <div class="header">
        <!-- <div class="before" :style="`background-image:url(${$store.getters.base_url+shopInfo.logo})`"></div> -->
        <img class="logo" :src="$store.getters.base_url+shopInfo.logo" alt="">
        <div class="header_content" @click="showModal">
            <p class="header_title">{{shopInfo.shop_name}}</p>
            <p class="item_text"><Star :score="shopInfo.score" color="#fff"></Star></p>
            <p class="item_text">
                <!-- <span>距离:{{shopInfo.distance}}km</span> -->
            <span>{{shopInfo.is_refues?'支持退单':''}}</span>
            </p>
            <p class="header_notice"><span>公告:{{shopInfo.describe?shopInfo.describe:"暂无公告"}}</span><i class="iconfont icon-you notice-right-icon"></i></p>
        </div>
        <mt-popup
            v-model="popupVisible"
            modal="true"
            pop-transition="popup-fade"
            closeOnClickModal="true">
            <div>
                <img class="logo" :src="$store.getters.base_url+shopInfo.logo" alt="">
                <p class="popup-title">公告:{{shopInfo.describe?shopInfo.describe:"暂无公告"}}</p>
            </div>
        </mt-popup>
    </div>
</template>
<script>
import Star from '../components/star'
import { getShopInfo } from '../api'
export default {
    name:"info",
    data() {
        return {
            popupVisible:false,
            shopInfo:{score:10}
        }
    },
    created(){
        this.ShopInfo()
    },
    methods:{
        showModal(){
            this.popupVisible = !this.popupVisible
        },
        ShopInfo(){
            // console.log(this.$route.query.id)
            const data = {user_id:this.$store.getters.userInfo.id,token:this.$store.getters.token,store_id:this.$route.query.id};
            getShopInfo(data).then(res=>{
                // console.log(res);
                this.shopInfo = res.data
                // this.shopInfo.distance = parseInt(this.shopInfo.distance)
                this.$store.commit('SHOP_NAME',res.data)
                this.$emit('setShopInfo',res.data)
            })
        }
    },
    components:{
        Star
    }
}
</script>
<style scoped>
   .header {
       height: 6rem;
       display: flex;
       justify-content: space-around;
       /* align-items: center; */
       background:linear-gradient(#EC5D3D,#F1463C);
       color: #fff;
       padding: 1rem;
   }
   /* .before{
       content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8rem;
            margin-top: 3rem;
            background: transparent center center no-repeat;
            filter: blur(8px);
            z-index: -1;
            background-size: cover;
   } */
    .logo {
        width: 5rem;
        height: 5rem;
        border-radius: 5px;
        align-self: flex-start;
    }
    .header_content {
        width: 70%;
        height: 6rem;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }
    .header_notice {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        font-size: 0.8rem;
        /* line-height: 1rem; */
        padding: 0.4rem 0.2rem;
    }
    .header_title {   
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
        font-weight: bolder;
    }
    .mint-popup {
        width: 80%;
        border-radius: 10px;
        text-align: center;
        padding: 1rem;
    }
    .item_text {
        line-height: 1.5rem;
        font-size: 0.8rem;
        display: flex;
        justify-content: space-between;
    }
    .popup-title{
        color: #333;
    }
    .notice-right-icon{
        /* float: right; */
        position: absolute;
        right: 1rem;
    }
</style>
